<template>
  <div class="user-center">
    <!-- 当前用户信息 -->
    <div class="user-info" :style="{ backgroundImage: `url(${userInfo.bg_img_url || require('@/assets/goImages/back.png')})` }">
      <div class="user-box">
        <!-- 顶部导航 -->
        <div class="nav">
          <div class="back" @click="$router.back()">
            <img src="@/assets/arrow/6p.png" alt="" />
          </div>
          <div class="option" @click="showReport = true">
            <span class="spot"></span>
            <span class="spot"></span>
            <span class="spot"></span>
          </div>
        </div>
        <!-- 作者信息 -->
        <div class="author-info">
          <div class="author-head" @click="previewImg(userInfo.avatar)">
            <img :src="userInfo.avatar || ''" alt="" />
          </div>
          <div class="nick-name">
            <span class="nick">
              <span class="text">{{ userInfo.name || '' }}</span>
              <span class="level"> {{ userInfo.level }}</span></span
            >
            <span class="name">{{ userInfo.introduction }}</span>
          </div>
        </div>
        <div class="line"></div>
        <!-- 关注聊天 -->
        <div class="follow-box">
          <div class="follow" @click="toggleFollow">
            <span :class="{ active: userInfo.is_following }" v-if="userInfo.is_following">已关注</span>
            <span v-else>关注</span>
          </div>
          <div class="chat">
            <span>聊天</span>
          </div>
        </div>
      </div>
    </div>
    <refresh-list :status="status" :canFresh="true" @on-load="onLoad">
      <template #list>
        <!-- 晒图 -->
        <div class="side-box">
          <div class="side-pic">
            <h2>晒图</h2>
            <div class="all-video">
              <span class="all" :class="post_type == '' ? 'active' : ''" @click="togglePostType('all')">全部({{ userInfo.post_count }})</span>
              <span class="line">|</span>
              <span class="video" :class="post_type == 'video_post' ? 'active' : ''" @click="togglePostType('video_post')">视频({{ userInfo.video_post_count }})</span>
            </div>
          </div>
          <!-- 显示图片 -->
          <div v-if="post_type == ''">
            <div class="side-list" v-for="(item, index) in userReleaseList" :key="index">
              <side-item :sideInfo="item" :type="item.type == 5 ? 'video_post' : ''"></side-item>
            </div>
          </div>
          <!-- 显示视频 -->
          <div v-else>
            <div class="video-list" v-for="(item, index) in userReleaseVideo" :key="index">
              <side-item :sideInfo="item" :type="'video_post'"></side-item>
            </div>
          </div>
        </div>
      </template>
    </refresh-list>
    <transition name="report">
      <report-com :show="showReport" @hide-report="showReport = false" v-if="showReport"></report-com>
    </transition>
  </div>
</template>

<script>
import SideItem from '../SideItem.vue'
import RefreshList from '@/components/activity/public-component/RefreshList.vue'
import axios from '@/utils/request'
import ReportCom from './Report Com.vue'
import { preview } from '@/utils/preview'
export default {
  props: ['id'],
  components: {
    SideItem,
    RefreshList,
    ReportCom
  },
  data() {
    return {
      status: {
        isLoading: false,
        finished: false,
        loading: false
      },
      showReport: false,
      post_type: '', // 请求视频时使用
      page: 1, // 用于翻页请求
      userInfo: {}, //当前活动的id值
      userReleaseList: [], // 相关推荐的数据列表
      userReleaseVideo: [] // 用户发布的视频数据
    }
  },
  methods: {
    // 请求作者信息
    async requestUserInfo() {
      /*
    请求地址：https://api.xmonster.cn/v2/users/329397
    请求方式：get
    */
      const data = await axios.get('/v2/users/' + this.id)
      if (data) {
        this.userInfo = {
          bg_img_url: data.bg_img_url,
          avatar: data.avatar,
          name: data.name,
          level: data.membership_info.level,
          introduction: data.introduction,
          is_following: data.is_following,
          video_post_count: data.video_post_count,
          post_count: data.post_count
        }
      }
    },
    // 请求作者发布的相关信息
    async requestReleaseList() {
      /*
      请求地址：https://api.xmonster.cn/v2/users/329397/posts
               https://api.xmonster.cn/v2/users/329397/posts
      请求方式：get
      请求参数：
      params:{
        page: 1
        post_type：video_post（请求视频）
      }
      */
      const data = await axios.get(`/v2/users/${this.id}/posts`, {
        params: {
          post_type: this.post_type,
          page: this.page
        }
      })
      if (data.length > 0) {
        if (this.post_type == 'video_post') {
          this.userReleaseVideo = [...this.userReleaseVideo, ...data]
        } else {
          this.userReleaseList = [...this.userReleaseList, ...data]
        }
        this.status.loading = false
        this.status.finished = false
        this.page++
      } else {
        this.status.finished = true
      }
    },
    // 关注
    toggleFollow() {
      let follow = this.userInfo.is_following
      if (follow) {
        this.userInfo.is_following = false
        this.$toast('取消关注')
      } else {
        this.userInfo.is_following = true
        this.$toast('已关注')
      }
    },
    // 切换视频或者所有
    togglePostType(val) {
      console.log(val)
      if (val == 'all') {
        if (this.post_type == '') {
          return
        }
        this.post_type = ''
      } else {
        if (this.post_type == val) {
          return
        }
        this.post_type = val
      }
      this.page = 1
      this.userReleaseList = []
      this.userReleaseVideo = []
      this.sendRequest()
    },
    // 滚动加载更多
    async onLoad() {
      this.requestReleaseList()
      this.status.loading = false
    },
    async sendRequest() {
      const Toast = this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...'
      })
      try {
        await this.requestReleaseList()
      } catch {
        Toast.clear()
        this.$toast.fail('请检查网络！')
      } finally {
        Toast.clear()
      }
    },
    previewImg(img) {
      preview([img], 0)
    }
  },
  created() {
    this.requestUserInfo()
    this.sendRequest()
  }
}
</script>

<style lang="less" scoped>
.user-center {
  img {
    height: 100%;
    width: 100%;
  }
  .report-enter,
  .report-leave-to {
    transform: translateY(100%);
  }
  .report-enter-active,
  .report-leave-active {
    transition: all 0.5s linear;
  }
  .report-enter-to,
  .report-leave {
    transform: translateY(0%);
  }
  .user-info {
    position: relative;
    height: 220px;
    background-repeat: no-repeat;
    background-size: cover;

    .user-box {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      padding: 15px 10px 0;

      .nav {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .back {
          height: 30px;
          width: 30px;
        }
        .option {
          display: flex;
          .spot {
            height: 4px;
            width: 4px;
            margin: 3px;
            background-color: #fff;
            border-radius: 999px;
          }
        }
      }
      .author-info {
        margin-top: 30px;
        display: flex;
        align-items: center;
        color: #fff;
        font-size: 14px;
        .author-head {
          height: 50px;
          width: 50px;
          border-radius: 999px;
          overflow: hidden;
          margin-right: 10px;
        }
        .nick-name {
          display: flex;
          justify-content: space-between;
          flex-direction: column;
          .nick {
            display: flex;
            align-items: center;
            .text {
              font-size: 18px;
              line-height: 24px;
            }
            .level {
              padding: 2px 10px;
              font-size: 12px;
              margin-left: 10px;
              border-radius: 999px;
              background-image: linear-gradient(to right, #eda736, #e9c387, #e9d5b6);
            }
          }

          .name {
            width: 200px;
            overflow: hidden;
            padding: 5px 0;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
      .line {
        width: 100%;
        border-top: 1px solid #fff;
        margin-top: 20px;
      }

      .follow-box {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: 30px;

        span {
          font-weight: 600;
          padding: 5px 15px;
          font-size: 14px;
          border-radius: 999px;
          color: #fff;
          border: 1px solid #fff;

          &.active {
            background-color: #fff;
            color: #333;
          }
        }

        .chat {
          margin-left: 10px;
        }
      }
    }
  }
  .side-box {
    padding: 10px;

    .side-pic {
      padding: 10px 0;
      h2 {
        color: #000;
        font-size: 16px;
        font-weight: 700;
        line-height: 24px;
        margin-bottom: 10px;
      }

      .all-video {
        font-size: 14px;
        color: #777;
        .line {
          margin: 0 5px;
        }
        span {
          padding: 10px 0;
        }

        .active {
          color: #d94648;
        }
      }
    }
  }
}
</style>
